<template>
    <!-- 网络磁盘快照 -->
    <a-card>
        <NoAuthPage v-showNoAuth="'D5-1'" :imgBoxStyle="{ height: '40vh', margin: 0 }" />

        <a-row v-userAuth="'D5-1'">
            <div style="margin:0 0 1em 0 ">
                <a-tooltip placement='bottom' v-userAuth="'D5-2'">
                    <template slot='title'>
                        <span>{{ $t('Create') }}</span>
                    </template>
                    <a-button type='primary' icon='file-add' @click="add = true"></a-button>
                </a-tooltip>
                <a-tooltip placement='bottom' v-userAuth="'D5-3'">
                    <template slot='title'>
                        <span>{{ $t('Rename') }}</span>
                    </template>
                    <a-button :disabled="selectedRowKeys.length == 0" type='primary' style="margin-left:1em" icon='edit'
                        @click="selected('rename')"></a-button>
                </a-tooltip>
                <a-tooltip placement='bottom' v-userAuth="'D5-4'">
                    <template slot='title'>
                        <span>{{ $t('Protect') }}</span>
                    </template>
                    <a-button :disabled="selectedRowKeys.length == 0" type='primary' style="margin-left:1em" icon='lock'
                        @click="selected('protect')"></a-button>
                </a-tooltip>
                <a-tooltip placement='bottom' v-userAuth="'D5-5'">
                    <template slot='title'>
                        <span>{{ $t('Remove-protection') }}</span>
                    </template>
                    <a-button :disabled="selectedRowKeys.length == 0" type='danger' style="margin-left:1em" icon='unlock'
                        @click="selected('unprotect')"></a-button>
                </a-tooltip>
                <a-tooltip placement='bottom' v-userAuth="'D5-6'">
                    <template slot='title'>
                        <span>{{ $t('Clone2') }}</span>
                    </template>
                    <a-button :disabled="selectedRowKeys.length == 0" type='primary' style="margin-left:1em" icon='block'
                        @click="selected('clone')"></a-button>
                </a-tooltip>
                <!-- <a-tooltip placement='bottom'>
                <template slot='title'>
                    <span>{{$t('Copy')}}</span>
                </template>
                <a-button type='primary' style="margin-left:1em" icon='copy' @click="selected('copysnap')"></a-button>
            </a-tooltip> -->
                <a-tooltip placement='bottom' v-userAuth="'D5-7'">
                    <template slot='title'>
                        <span>{{ $t('Rollback') }}</span>
                    </template>
                    <a-button :disabled="selectedRowKeys.length == 0" type='primary' style="margin-left:1em" icon='undo'
                        @click="selected('rollsnap')"></a-button>
                </a-tooltip>
                <a-tooltip placement='bottom' v-userAuth="'D5-8'">
                    <template slot='title'>
                        <span>{{ $t('Delete') }}</span>
                    </template>
                    <a-button :disabled="selectedRowKeys.length == 0" type='danger' style="margin-left:1em"
                        icon='close-circle' @click="selected('snapdel')"></a-button>
                </a-tooltip>
            </div>
            <a-table class='tabsmall' :columns="snapcolumns" :loading="loading"
                :rowSelection='{ type: "radio", selectedRowKeys: selectedRowKeys, onChange: onSelectChange, onSelect: onSelect }'
                :dataSource="snapdata" size="small" :pagination='pagination' rowKey='key' :locale="defaultSetting">
                <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
                    class='custom-filter-dropdown'>
                    <a-input v-ant-ref="c => searchInput = c" :placeholder="$t('Enter') + $t('Search-content')"
                        :value="selectedKeys[0]" @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                        @pressEnter="() => handleSearch(selectedKeys, confirm)"
                        style="width: 188px; margin-bottom: 8px; display: block;" />
                    <a-button type='primary' @click="() => handleSearch(selectedKeys, confirm)" icon="search" size="small"
                        style="width: 90px; margin-right: 8px">{{ $t('Search') }}</a-button>
                    <a-button @click="() => handleReset(clearFilters)" size="small"
                        style="width: 90px">{{ $t('Reset') }}</a-button>
                </div>
                <a-icon slot="filterIcon" slot-scope="filtered" type='search'
                    :style="{ color: filtered ? '#108ee9' : undefined }" />
                <template slot="customRender" slot-scope="text">
                    <span v-if='searchText'>
                        <template
                            v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))">
                            <mark v-if="fragment.toLowerCase() === searchText.toLowerCase()" :key="i"
                                class="highlight">{{ fragment }}</mark>
                            <template v-else>{{ fragment }}</template>
                        </template>
                    </span>
                    <template v-else>{{ text }}</template>
                </template>
                <span slot="is_protected" slot-scope='is_protected'>
                    <span :class="is_protected == true ? 'green-circle' : 'red-circle'"></span>
                    <span>{{ is_protected == true ? $t('Protect') : $t('Unprotect') }}</span>
                    <!-- <a-tag :color="is_protected == true?'green':'red'">{{is_protected == true?$t('Protect'):$t('Unprotect')}}</a-tag> -->
                </span>
            </a-table>

        </a-row>

        <!-- 创建快照 -->
        <a-modal :title="$t('Create') + $t('Snap')" v-model='add' @cancel='cancelhandle' width='35%' @ok='addsub'
            :cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
            <a-spin size="large"
                style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%"
                tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
            <a-form :form='form'>
                <a-form-item :label="$t('Snap') + $t('Name')" v-bind='formlayout'>
                    <a-input v-decorator="['name', {
                        rules: [{ required: true, message: $t('Enter') + $t('Snap') + $t('Name') },
                        { pattern: namePattern, message: $t('Not_enter_special_characters') }]
                    }]" :placeholder="$t('Enter') + $t('Snap') + $t('Name')"></a-input>
                </a-form-item>
                <a-form-item :label="$t('Own-pool')" v-bind='formlayout'>
                    <a-select v-decorator="['pool', {
                        rules: [{ required: true, message: $t('Choose') + $t('Own-pool') }]
                    }]"
                        :placeholder="$t('Choose') + $t('Own-pool')" @change="handleChange">
                        <!-- ,initialValue:poolname  :disabled="disb"-->
                        <!-- <a-select-option v-for='(i,index) in basedata' :value='i.pool' :key="index">{{i.pool}}</a-select-option> -->
                        <a-select-option v-for='i in basedata' :value='i.pools.id'
                            :key="i.pools.id">{{ i.pools.name }}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :label="$t('Block-name')" v-bind='formlayout'>
                    <a-select v-decorator="['block', {
                        rules: [{ required: true, message: $t('Choose') + $t('Block-name') }],
                    }]"
                        :placeholder="$t('Choose') + $t('Block-name')" @change="changeBlock">
                        <!-- initialValue:blockname :disabled="disb"-->
                        <!-- <a-select-option v-for='(i,index) in baseblock' :value='i' :key="index">{{i}}</a-select-option> -->
                        <a-select-option v-for='i in baseblock' :value='i.id' :key="i.id">{{ i.name }}</a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
        </a-modal>

        <Renamesnap :rr='rename' @omodal='changemodal' :tarname='onerecord'></Renamesnap>
        <Copysnap :ss='copysnap' @omodal='changemodal' :tarname='onerecord'></Copysnap>
        <Clonesnap :cc='clone' @omodal='changemodal' :tarname='onerecord'></Clonesnap>

    </a-card>
</template>

<script>
import Renamesnap from '../../../views/storage_mgr/osd/osdopr/renamesnap'
import Copysnap from '../../../views/storage_mgr/osd/osdopr/copysnap'
import Clonesnap from '../../../views/storage_mgr/osd/osdopr/clonesnap'
import EmptyData from '@/components/common/EmptyData'
import {
    setTimeout
} from 'timers';
import NoAuthPage from '@/components/common/NoAuthPage'

import request from '@/request/request'

export default {
    name: "Snap",
    props: ['ss',],//'blockname','poolname'
    components: { Copysnap, Clonesnap, Renamesnap, EmptyData, NoAuthPage },
    data() {
        return {
            form: this.$form.createForm(this),
            add: false,
            rename: false,
            clone: false,
            copysnap: false,
            formlayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 14 }
            },
            searchText: '',
            searchInput: null,
            snapcolumns: [{
                title: this.$t('Snap') + this.$t('Name'),
                dataIndex: "name",
                key: "name",
                ellipsis: true,
                sorter: (a, b) => a.name.length - b.name.length,
                scopedSlots: {
                    filterDropdown: 'filterDropdown',
                    filterIcon: 'filterIcon',
                    customRender: 'customRender',
                },
                onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
                onFilterDropdownVisibleChange: (visible) => {
                    if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus()
                        }, 0)
                    }
                }
            },
            {
                title: this.$t('Block-name'),
                dataIndex: "block_name",
                key: "block_name",
                ellipsis: true
            },
            {
                title: this.$t('Pool') + this.$t('Name'),
                dataIndex: "pool_name",
                key: "pool_name",
                ellipsis: true
            },
            {
                title: this.$t('Capacity'),
                dataIndex: "size",
                key: "size",
                ellipsis: true
            },
            {
                title: this.$t('Status'),
                dataIndex: "is_protected",
                key: "is_protected",
                ellipsis: true,
                scopedSlots: { customRender: 'is_protected' }
            },
            {
                title: this.$t('Create') + this.$t('Time'),
                dataIndex: "create_time",
                key: "create_time",
                ellipsis: true
                // key: "timestamp"
            }
            ],
            pagination: {
                defaultPageSize: 3,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger: true,
                pageSizeOptions: ['3', '5', '10', '15'],
                onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            selectedRowKeys: [],
            snapdata: [],
            basedata: [],
            target: '',
            uint: [{ val: 'KiB', label: 'KiB' }, { val: 'MiB', label: 'MiB' }, { val: 'GiB', label: 'GiB' }, { val: 'TiB', label: 'TiB' }],
            disb: true,
            oldpool: '',
            oldblock: '',
            baseblock: [],
            choose: '',
            oldunit: '',
            oldsize: '',
            onerecord: [],
            loading: true,
            num: 0,
            spinning: false,
            defaultSetting: { emptyText: <EmptyData /> },
            targetOwnPoolName: '',
            targetBlockName: ''
        }
    },
    mounted() {
        this.getdata()
        this.getbasedata()
    },
    watch: {
        // blockname(value){
        // 	this.disb = true
        //     this.getdata()
        // },
        // poolname(){
        //     this.getdata()
        // },
        getlanguage(val) {  //监听语言切换，切换data组件内的多语言
            this.snapcolumns = [{
                title: this.$t('Snap') + this.$t('Name'),
                dataIndex: "name",
                key: "name",
                ellipsis: true,
                sorter: (a, b) => a.name.length - b.name.length,
                scopedSlots: {
                    filterDropdown: 'filterDropdown',
                    filterIcon: 'filterIcon',
                    customRender: 'customRender',
                },
                onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
                onFilterDropdownVisibleChange: (visible) => {
                    if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus()
                        }, 0)
                    }
                }
            },
            {
                title: this.$t('Block-name'),
                dataIndex: "block_name",
                key: "block_name",
                ellipsis: true
            },
            {
                title: this.$t('Pool') + this.$t('Name'),
                dataIndex: "pool_name",
                key: "pool_name",
                ellipsis: true
            },
            {
                title: this.$t('Capacity'),
                dataIndex: "size",
                key: "size",
                ellipsis: true
            },
            {
                title: this.$t('Status'),
                dataIndex: "is_protected",
                key: "is_protected",
                ellipsis: true,
                scopedSlots: { customRender: 'is_protected' }
            },
            {
                title: this.$t('Create') + this.$t('Time'),
                dataIndex: "create_time",
                key: "create_time",
                ellipsis: true
                // key: "timestamp"
            }
            ]
        },
        '$store.state.isBlockListChange'(newValue, oldValue) {//监听是否新增了块设备
            if (newValue != oldValue) {
                this.getbasedata();
            }
        }
    },
    computed: {
        getblockdata() {
            return this.$store.state.blockdata
        },
        getlanguage() {
            return this.$store.state.language
        }
    },
    methods: {
        getdata() {
            this.loading = true
            request('get', 'block/snap').then(res => {
                // console.log('获取快照列表', res)
                // if(this.blockname == ''){
                if (res.data.flag == 1) {
                    this.model(res.data.id) //返回模板
                    this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                } else {
                    if (res.status == 200) {
                        this.disb = false
                        this.snapdata = res.data
                    }
                }

                // }else{
                //     this.snapdata = []
                //     for(var i=0;i<res.data.length;i++){
                //         if(res.data[i].block_name == this.blockname && res.data[i].pool_name == this.poolname){
                //             this.snapdata.push(res.data[i])
                //         }
                //     }
                // }
                // if(this.snapdata.length !== 0){
                //     this.onerecord = this.snapdata[this.num]
                // }
            }).catch(err => {

            }).finally(() => {
                this.loading = false;
            })
        },
        getbasedata() {
            this.basedata = [];
            request('post', 'block/imageInfoOfPoolInfo').then(res => {
                // console.log('获取专属存储池',res);
                this.basedata = res.data;
            })
        },
        handleChange(value) {
            this.baseblock = [];
            this.form.resetFields('block')
            for (const item of this.basedata) {
                // if(value == item.pool){
                if (value == item.pools.id) {
                    // this.baseblock = item.blocks
                    this.baseblock = item.images
                    this.targetOwnPoolName = item.pools.name;
                }
            }
        },

        //改变块设备
        changeBlock(value) {
            this.baseblock.some(item => {
                if (item.id == value) {
                    this.targetBlockName = item.name;
                    return true;
                }
            })
        },

        handleSearch(selectedKeys, confirm) {
            confirm()
            this.searchText = selectedKeys[0]
        },

        handleReset(clearFilters) {
            clearFilters()
            this.searchText = ''
        },
        onSelect(record, selected, selectedRows) {
            this.onerecord = record;
            this.target = this.onerecord.name;
            this.oldpool = this.onerecord.pool_name;
            this.oldblock = this.onerecord.block_name;
            this.oldsize = this.onerecord.size.split('.0 ')[0];
            this.oldunit = this.onerecord.size.split('.0 ')[1];
            this.status = this.onerecord.is_protected;
            for (let i = 0; i < this.snapdata.length; i++) {
                if (record.name == this.snapdata[i].name) {
                    this.num = i
                }
			}
        },
        onSelectChange(selectedRowKeys, selectedRow) {
            // let ids = selectedRowKeys.join(selectedRowKeys)
            // this.num = selectedRowKeys;
            this.selectedRowKeys = selectedRowKeys
            // for(var i=0;i<this.snapdata.length;i++){
            // 	if(ids == this.snapdata[i].key){
            //         this.num = i
            // 	}
            // }
        },
        selected(name) {
            if (this.selectedRowKeys.length !== 0) {
                if (name == 'rename') {
                    this.rename = true
                }
                else if (name == 'rollsnap') {
                    this.rollsnap()
                }
                else if (name == 'clone') {
                    this.clone = true
                }
                else if (name == 'copysnap') {
                    this.copysnap = true
                }
                else if (name == 'snapdel') {
                    if (!this.onerecord.is_protected) {
                        this.snapdel()
                    } else {
                        this.$notification['error']({
                            message: this.$t('Snapshot_is_protected'),
                        })
                    }
                } else if (name == 'protect') {
                    if (!this.onerecord.is_protected) {
                        this.toprotect()
                    } else {
                        this.$notification['error']({
                            message: this.$t('Snapshot_is_protected'),
                        })
                    }
                    // this.onerecord.is_protected = true

                } else if (name == 'unprotect') {
                    if (this.onerecord.is_protected) {
                        this.noprotect()
                    } else {
                        this.$notification['error']({
                            message: this.$t('Snapshot_not_protected'),
                        })
                    }
                    // this.onerecord.is_protected = false
                }
            }
            else
                this.$notification['error']({
                    message: this.$t('Choose') + this.$t('Operating-object')
                })
        },
        addsub(e) {  //新增快照
            e.preventDefault();
            this.form.validateFields((err, value) => {
                if (!err) {
                    this.spinning = true
                    request('put', 'block/snap', {
                        pool_id: value.pool, // 池编号
                        image_id: value.block, // 块设备编号
                        snapshot_name: value.name, // 快照名称
                        image_name: this.targetBlockName,
                        pool_name: this.targetOwnPoolName,
                    }).then(res => {
                        this.selectedRowKeys = [];
                        this.model(res.data.id) //返回模板
                        this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                        // this.gettask()  //任务栏信息
                        this.spinning = false;
                        this.add = false;
                        this.form.resetFields();
                        this.getdata()
                        this.targetOwnPoolName = '';
                        this.targetBlockName = '';
                    }).catch(err => {
                        this.spinning = false;
                        this.add = false;
                    })
                }
            })
        },
        //快照保护
        toprotect() {
            let _this = this
            this.$confirm({
                title: this.$t('Protect'),
                content: '你确定将 ' + this.onerecord.name + ' 设置为保护状态吗？',
                cancelText: this.$t('Cancel'),
                okText: this.$t('Sure'),
                onOk() {
                    // _this.$axios({
                    // 	// method: 'put',
                    //     // url: _this.allurl+'block/snap',
                    // 	method: 'post',
                    // 	url: _this.allurl+'block/snap/protect',
                    // 	data: {
                    //         pool_id: _this.onerecord.pool_id, //池编号
                    //         image_id: _this.onerecord.image_id, //块设备编号
                    //         snapshot_id: _this.onerecord.id, //快照编号
                    //         snapshot_name: _this.onerecord.name,
                    //         pool_name: _this.onerecord.pool_name,
                    //         block_name: _this.onerecord.block_name,
                    //         // pool:_this.onerecord.pool_name,
                    //     	// block:_this.onerecord.block_name,
                    //     	// origin_name:_this.onerecord.name,
                    //   		// is_protected:true,
                    //     }
                    // })
                    request('post', 'block/snap/protect', {
                        pool_id: _this.onerecord.pool_id, //池编号
                        image_id: _this.onerecord.image_id, //块设备编号
                        snapshot_id: _this.onerecord.id, //快照编号
                        snapshot_name: _this.onerecord.name,
                        pool_name: _this.onerecord.pool_name,
                        block_name: _this.onerecord.block_name,
                    })
                        .then(res => {
                            _this.selectedRowKeys = [];
                            _this.getdata();
                            _this.model(res.data.id) //返回模板
                            _this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                            // _this.gettask()  //任务栏信息
                        })
                },
                onCancel() {

                }
            })
        },
        //取消保护
        noprotect() {
            let _this = this
            this.$confirm({
                title: this.$t('Remove-protection'),
                content: '你确定解除 ' + this.onerecord.name + ' 的保护状态吗？',
                cancelText: this.$t('Cancel'),
                okText: this.$t('Sure'),
                okType: 'danger',
                onOk() {
                    // _this.$axios({
                    // 	// method: 'put',
                    // 	// url: _this.allurl+'block/snap',
                    //     method: 'post',
                    // 	url: _this.allurl+'block/snap/unprotect',
                    // 	data: {
                    //         pool_id: _this.onerecord.pool_id, //池编号
                    //         image_id: _this.onerecord.image_id, //块设备编号
                    //         snapshot_id: _this.onerecord.id, //快照编号
                    //         snapshot_name: _this.onerecord.name,
                    //         pool_name: _this.onerecord.pool_name,
                    //         block_name: _this.onerecord.block_name,
                    //         // pool:_this.onerecord.pool_name,
                    //     	// block:_this.onerecord.block_name,
                    //     	// origin_name:_this.onerecord.name,
                    //   		// is_protected:false,
                    //     }
                    // })
                    request('post', 'block/snap/unprotect', {
                        pool_id: _this.onerecord.pool_id, //池编号
                        image_id: _this.onerecord.image_id, //块设备编号
                        snapshot_id: _this.onerecord.id, //快照编号
                        snapshot_name: _this.onerecord.name,
                        pool_name: _this.onerecord.pool_name,
                        block_name: _this.onerecord.block_name,
                    })
                        .then(res => {
                            _this.selectedRowKeys = [];
                            _this.getdata()
                            _this.model(res.data.id) //返回模板
                            _this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                            // _this.gettask()  //任务栏信息
                        })
                },
                onCancel() {

                }
            })
        },
        rollsnap() { //快照回滚
            let _this = this
            this.$confirm({
                title: this.$t('Snap') + ' ' + this.$t('Rollback'),
                content: this.$t('Sure_rollback') + this.onerecord.name,
                cancelText: this.$t('Cancel'),
                okText: this.$t('Sure'),
                onOk() {
                    request('post', 'block/snap/rollback', {
                        pool_id: _this.onerecord.pool_id,
                        image_id: _this.onerecord.image_id,
                        snapshot_id: _this.onerecord.id,
                        snapshot_name: _this.onerecord.name,
                        pool_name: _this.onerecord.pool_name,
                        block_name: _this.onerecord.block_name,
                        // pool:_this.onerecord.pool_name,
                        // block:_this.onerecord.block_name,
                        // name:_this.onerecord.name
                    }).then(res => {
                        // console.log('oper--rollback snapshot:', res)
                        _this.model(res.data.id) //返回模板
                        _this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                        // _this.gettask()  //任务栏信息
                    }).catch(err => {
                        console.log(err)
                    })
                },
                onCancel() {

                }
            })
        },
        snapdel() { //快照删除
            let _this = this
            this.$confirm({
                title: this.$t('Delete') + this.$t('Snap'),
                content: this.$t('Sure-to-del') + ": " + this.onerecord.name + ' ？',
                cancelText: this.$t('Cancel'),
                okText: this.$t('Sure'),
                okType: 'danger',
                onOk() {
                    // _this.$axios({
                    //   method: 'delete',
                    //   url: _this.allurl+'block/snap',
                    //   data: {
                    //     pool_id: _this.onerecord.pool_id,
                    //     image_id: _this.onerecord.image_id,
                    //     snapshot_id: _this.onerecord.id,
                    //     snapshot_name: _this.onerecord.name,
                    //     pool_name: _this.onerecord.pool_name,
                    //     block_name: _this.onerecord.block_name,
                    //     // pool:_this.onerecord.pool_name,
                    //    	// block:_this.onerecord.block_name,
                    //     // name:_this.onerecord.name
                    //   }
                    // })
                    request('DELETE', 'block/snap', {
                        pool_id: _this.onerecord.pool_id,
                        image_id: _this.onerecord.image_id,
                        snapshot_id: _this.onerecord.id,
                        snapshot_name: _this.onerecord.name,
                        pool_name: _this.onerecord.pool_name,
                        block_name: _this.onerecord.block_name,
                    })
                        .then(res => {
                            // console.log('oper--delete snapshot:', res)
                            _this.selectedRowKeys = [];
                            _this.getdata()
                            _this.model(res.data.id) //返回模板
                            _this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                            // _this.gettask()  //任务栏信息
                        })
                },
                onCancel() {

                }
            })
        },
        cancelhandle() {
            this.add = false
            this.rename = false
            this.spinning = false
            this.form.resetFields();
            this.targetOwnPoolName = '';
            this.targetBlockName = '';
        },
        changemodal(val, isCancel) {
            this.copysnap = val
            this.clone = val
            this.rename = val
            if (!isCancel) {
                this.getdata()
                this.loading = true
                request('get', 'block/').then(res => {
                    // for(var i=0;i<res.data.length;i++){  //数据单位处理
                    // 	res.data[i].size = this.bytesToSize(res.data[i].size)
                    // 	res.data[i].num_objs = this.bytesToBs(res.data[i].num_objs)
                    // 	res.data[i].obj_size = this.bytesToSize(res.data[i].obj_size)
                    // 	res.data[i].disk_usage = this.bytesToSize(res.data[i].disk_usage)
                    // 	res.data[i].total_disk_usage = this.bytesToSize(res.data[i].total_disk_usage)
                    // }
                    if (res.data.flag == 1) {
                        this.model(res.data.id) //返回模板
                        this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                    } else {
                        this.blockdata = res.data
                        this.$store.commit('getblockdata', {
                            blockdata: res.data,
                        })
                        // this.loading = false
                    }
                }).finally(() => {
                    this.loading = false
                })
            }
        },
    },

};
</script>
